import React, { Component } from 'react';
import "./Caozuo.scss"
class Caozuo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            brand: '',
            goodsName: '',
            model: '',
            category: '',
            intoDatetime: '',
            quantity: '',
            price: ''
        }
    }
    componentDidMount() {
        const goodsInfo = this.props.location.a;
        if (goodsInfo) {
            this.setState({
                goodsID: goodsInfo.goodsID,
                brand: goodsInfo.brand,
                goodsName: goodsInfo.goodsName,
                model: goodsInfo.model,
                category: goodsInfo.category,
                intoDatetime: goodsInfo.intoDatetime.replace(' ', 'T'),
                quantity: goodsInfo.quantity,
                price: goodsInfo.price
            })
        }
    }


    // 设置表单的值
    setFormElementVal = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        });
    }
    kkk = () => {
        const params = new URLSearchParams();
        params.append('goodsID', this.state.goodsID);
        params.append('brand', this.state.brand);
        params.append('goodsName', this.state.goodsName);
        params.append('model', this.state.model);
        params.append('category', this.state.category);
        params.append('intoDatetime', this.state.intoDatetime);
        params.append('quantity', this.state.quantity);
        params.append('price', this.state.price);

        React.axios.post('/store-manage/w2003/goods-manage-g1/goods-update.php', params)
            .then(res => {
                alert(res.data);
                // 如果服务器返回成功结果
                if(res.data.includes('成功')) {
                    this.props.history.goBack();
                }
            });
    }
    qr=()=>{
        const BASE_API = 'http://api.aulence.com/store-manage/w2003';
        const GOODS_URL = `${BASE_API}/goods-manage-g1`;
        
            const params = new URLSearchParams();
            params.append('brand',this.state.brand);
            params.append('goodsName',this.state.goodsName);
            params.append('model',this.state.model);
            params.append('category',this.state.category);
            params.append('intoDatetime',this.state.intoDatetime);
            params.append('quantity',this.state.quantity);
            params.append('price',this.state.price);
        
            React.axios.post(`${GOODS_URL}/goods-add.php`, params).then(res => {
                alert(res.data)
                console.log(res);
                // 为指定表格重载数据
                // loadGoodsData('goodsInfo');
                
            }).catch(err => {
                console.error(err);
            });
            // this.props.history.goBack();
    }


    

    render() {
        return (
            <div className="vvv">

                <form className="formInfo">
                    <div className="formLine">
                        <label>商品品牌：</label>
                        <input
                            name="brand"
                            type="text"
                            placeholder="请输入该商品的品牌"
                            value={this.state.brand}
                            onChange={this.setFormElementVal}
                        />
                        <span className="required">*</span>
                    </div>
                    <div className="formLine">
                        <label>商品名称：</label>
                        <input
                            name="goodsName"
                            type="text"
                            placeholder="请输入该商品的名称"
                            value={this.state.goodsName}
                            onChange={this.setFormElementVal}
                        />
                        <span className="required">*</span>
                    </div>
                    <div className="formLine">
                        <label>商品型号：</label>
                        <input
                            name="model"
                            type="text"
                            placeholder="请输入该商品的型号"
                            value={this.state.model}
                            onChange={this.setFormElementVal}
                        />
                    </div>
                    <div className="formLine">
                        <label>所属分类：</label>
                        <select
                            name="category"
                            value={this.state.category}
                            onChange={this.setFormElementVal}

                        >
                            <option value="">-- 请选择 --</option>
                            <option value="数码电器 / 办公用品">数码电器 / 办公用品</option>
                            <option value="食品饮料 / 厨房用品">食品饮料 / 厨房用品</option>
                            <option value="服装鞋包 / 化妆洗护">服装鞋包 / 化妆洗护</option>
                            <option value="家居家装 / 家用纺织">家居家装 / 家用纺织</option>
                            <option value="汽车配件 / 汽车用品">汽车配件 / 汽车用品</option>
                            <option value="运动户外 / 文娱艺术">运动户外 / 文娱艺术</option>
                            <option value="钟表珠宝 / 计生医疗">钟表珠宝 / 计生医疗</option>
                            <option value="其它分类">其它分类</option>
                        </select>
                        <span className="required">*</span>
                    </div>
                    <div className="formLine">
                        <label>入库时间：</label>
                        <input
                            name="intoDatetime"
                            type="datetime-local"
                            value={this.state.intoDatetime}
                            onChange={this.setFormElementVal}

                        />
                        <span className="required">*</span>
                    </div>
                    <div className="formLine">
                        <label>入库数量：</label>
                        <input
                            name="quantity"
                            type="number"
                            placeholder="该商品此次入库的数量"
                            value={this.state.quantity}
                            onChange={this.setFormElementVal}

                        />
                        <span className="required">*</span>
                    </div>
                    <div className="formLine">
                        <label>商品单价：</label>
                        <input
                            name="price"
                            type="number"
                            placeholder="该商品的成本单价"
                            value={this.state.price}
                            onChange={this.setFormElementVal}

                        />
                        <span className="required">*</span>
                    </div>
                    <div className="btnGroup">
                        <label></label>
                        {
                            this.props.location.a
                                ?
                                <button
                                    type="button"
                                    onClick={() => {
                                        this.props.history.goBack();
                                    }}
                                >取消</button>
                                :
                                <button
                                    type="reset"
                                className="yu">重置</button>
                        }
                        {
                            this.props.location.a
                                ?
                                <button
                                    className="btn-add"
                                    type="button"
                                    onClick={this.kkk}
                                >确认修改</button>
                                :
                                <button
                                    className="btn-edit"
                                    type="button"
                                    onClick={this.qr}
                                    className="yu"
                                     >确认录入</button>
                        }
                    </div>
                </form>

            </div>
        );
    }
}

export default Caozuo;
